<template>
    <div>

        <div style="margin: 10px 0">
            <el-input style="width: 250px" placeholder="审核产品名称" suffix-icon="el-icon-search" class="ml-5" v-model="agricultureName"></el-input>
            <el-input style="width: 250px" placeholder="审核产品类型" suffix-icon="el-icon-edit" class="ml-5" v-model="agricultureVariety"></el-input>
            <el-select v-model="status" placeholder="审核状态">
                <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
            <el-button class="ml-5" type="warning" @click="reset">重置</el-button>
        </div>


        <el-table :data="tableData" border stripe :header-row-class-name="headerBg" @selection-change="handleSelectionChange">  //border stripe把表格变成斑马线风格
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="agricultureName" label="农产品名称" width="120"></el-table-column>
            <el-table-column prop="userName" label="审核员名称"></el-table-column>
            <el-table-column prop="quantity" label="上架数量"></el-table-column>
            <el-table-column prop="agricultureStatus"  :formatter="statusShow" label="农产品审核状态"></el-table-column>
            <el-table-column prop="agricultureVariety"  label="农产品种类" width="100"></el-table-column>
            <el-table-column prop="status" label="审核状态" :formatter="statusShow2" width="80"></el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button type="success" @click="handleEdit(scope.row)">审核</el-button>
                    <el-popconfirm
                            class="ml-5"
                            confirm-button-text='确定'
                            cancel-button-text='取消'
                            icon="el-icon-info"
                            icon-color="red"
                            title="确定删除吗？"
                            @confirm="del(scope.row.Id)"
                    >
                    </el-popconfirm>

                   <!-- <el-button  type="warning" @click="details(scope.row)">查看详情</el-button>-->
                    <el-dialog
                            title="提示"
                            :visible.sync="dialogVisible"
                            width="80%"
                            :before-close="handleClose"
                    >
                        <el-descriptions title="农物信息">
                            <el-descriptions-item label="农物名称">{{form.agricultureName}}</el-descriptions-item>
                            <el-descriptions-item label="产出地">{{form.productionAddress}}</el-descriptions-item>>
                            <el-descriptions-item label="价格">{{form.price}}</el-descriptions-item>
                            <el-descriptions-item label="上架商家">{{form.uploadBy}}</el-descriptions-item>
                            <el-descriptions-item label="上架时间">{{form.uploadTime}}</el-descriptions-item>
                            <el-descriptions-item label="归属品种">{{form.variety}}</el-descriptions-item>
                            <el-descriptions-item label="商家联系电话">{{form.iphone}}</el-descriptions-item>
                        </el-descriptions>


                        <span slot="footer" class="dialog-footer">
                         <el-button @click="dialogVisible = false">取 消</el-button>
                         <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                         </span>
                    </el-dialog>

                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageSize"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <el-dialog title="农物审核信息" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="form" label-width="80px" size="small">
                <el-form-item label="农物Id">
                    <el-input :disabled="true" v-model="form.agriId" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="农物名称">
                    <el-input :disabled="true" v-model="form.agricultureName" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上架数量">
                    <el-input :disabled="true" v-model="form.quantity" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="产出地">
                    <el-input :disabled="true" v-model="form.productionAddress" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input :disabled="true" v-model="form.price" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上架商家">
                    <el-input :disabled="true" v-model="form.upLoader" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="通过与否">
                    <el-select v-model="form.agricultureStatus" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    export default {
        name: "verify",
        data(){
            return{
                tableData: [],
                total: 0,
                pageNum: 1,   //点进来默认的页数和条数
                pageSize: 5,
                Id: "",
                agricultureName: "",
                agricultureVariety: "",
                status:"",
                form: {
                    Id: '',
                    agriId:'',
                    agricultureName: '',
                    agricultureVariety: '',
                    price: '',
                    status: '',
                    quantity:'',
                    agricultureStatus:'',
                    remark:'',
                    upLoader:'',
                    userName:localStorage.getItem("userName")
                },
                dialogFormVisible: false,
                multipleSelection: [],
                headerBg: "headerBg",
                dialogVisible: false,
                options: [{
                    value: '1',
                    label: '通过'
                }, {
                    value: '2',
                    label: '不通过'
                }],
                options2: [{
                    value: '1',
                    label: '已审核'
                }, {
                    value: '2',
                    label: '未审核'
                }],
            }

        },
        created() {
            //请求分页查询数据
            this.load();
        },
        methods:{
            load(){     //封装请求分页查询方法，让其他地方调用
                this.request.get("/verify/list",{
                    params: {   //筛选条件
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        status: this.status,
                        agricultureName: this.agricultureName,
                        agricultureVariety: this.agricultureVariety
                    }
                }).then(res =>{
                    this.tableData=res.data.rows
                    this.total=res.data.total
                })
            },
            statusShow(row, index) {
                if (row.status == "1") {
                    return "已审核";
                } else if (row.status == "2") {
                    return "未审核";
                }
            },
            statusShow2(row, index) {
                if (row.agricultureStatus == "1") {
                    return "通过";
                } else if (row.agricultureStatus == "2") {
                    return "未通过";
                }
            },
            handleInputOpenValue(e) {
                this.$forceUpdate();
            },
            save(){
                if (this.form.id===''||this.form.id===undefined){
                    this.request.post("/verify/create",this.form).then(res => {
                        if (res){
                            this.$message.success("新增成功")
                            this.dialogFormVisible=false  //新增完关闭弹窗
                            this.load()
                        }else {
                            this.$message.fail("新增失败")
                        }
                    })
                }else {
                    this.request.post("/verify/update",this.form).then(res => {
                        if (res){
                            this.$message.success("修改成功")
                            this.dialogFormVisible=false  //新增完关闭弹窗
                            this.load()
                        }else {
                            this.$message.fail("修改失败")
                        }
                    })
                }
            },
            handleAdd(){   //新增打开表单默认为空
                this.dialogFormVisible=true
                this.form= {}
            },
            handleEdit(row){   //编辑打开为form里面的数据
                console.log(row)
                this.form= row
                this.dialogFormVisible=true
            },
            del(id){
                this.request.post("/verify/delete",id).then(res=>{
                    if (res){
                        this.$message.success("删除成功")
                        this.load()
                    }else {
                        this.$message.fail("删除失败")
                    }
                })
            },
            delBatch(){
                let ids= this.multipleSelection.map(e=>e.id).join()
                this.request.post("/verify/delete",ids).then(res=>{
                    if (res){
                        this.$message.success("删除成功")
                        this.load()
                    }else {
                        this.$message.fail("删除失败")
                    }
                })
            },
            reset(){  //重置
                this.agricultureName=""
                this.productionAddress=""
                this.iphone=""
                this.load()
            },

            handleSelectionChange(val){

                this.multipleSelection=val
                console.log(val)
            },
            handleSizeChange(pageSize){     //点击触发分页跳转,pageSize是web点击后传过来的
                console.log(pageSize)
                this.pageSize=pageSize
                this.load()
            },
            handleCurrentChange(pageNum){
                console.log(pageNum)
                this.pageNum=pageNum
                this.load()
            },
            importSuccess(){
                this.$message.success("文件导入成功")
                this.load()
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            details(row){
                this.dialogVisible = true
                this.form = row
            },
            exp(){
                window.open("http://localhost:8081/house/excel")
            }
        }
    }
</script>

<style>
    .headerBg{
        background: #cccccc !important;
    }
</style>
